<template>
	<view>
		<!-- <u-notice-bar type="primary" :volume-icon="false" mode="horizontal" :list="list"></u-notice-bar> -->
		<view class="btn">
		<u-input  :border="true" placeholder="请选择练习项目" v-model="curModule.label"  :disabled="pickerDisabled" type="select" @click="pickershow=true" />
		<u-select   v-model="pickershow" mode="single-column" :list="modulelist" label-name="moduleName" value-name="id" @confirm="chooseModule()"></u-select>
		</view>

		<view class="date">
			<!-- 年份 月份 -->
			<div class="month">
				<u-icon @click="weekPre" name="arrow-left"></u-icon>
				<span style="margin-left: 35rpx;margin-right: 30rpx;">
					{{ currentYear }}年{{ currentMonth }}月
				</span>
				<u-icon @click="weekNext" name="arrow-right"></u-icon>
			</div>

			<!-- 星期  -->
			<ul class="weekdays">
				<li></li>
				<li>一</li>
				<li>二</li>
				<li>三</li>
				<li>四</li>
				<li>五</li>
				<li>六</li>
				<li>日</li>
			</ul>
			<!-- 日期 -->
			<ul class="days">
				<li></li>
				<li @click="pick(day)" v-for="(day, index) in days" :key="index">
					<!--本月-->
					<span v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}</span>
					<span v-else>
						<!--今天-->
						<span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()"
						 class="active">{{ day.getDate() }}</span>
						<span v-else>{{ day.getDate() }}</span>
					</span>
				</li>
			</ul>

			<ul class="nametable" v-for="(item,index) in mainNameTable" :key="index">
				<li>{{timeorder[index].begin}}-{{timeorder[index].end}}</li>
				<li v-for="(item2,index2) in mainNameTable[index]" :class="{'active': index2==ind2&&ind.includes(index), 'blankspace': index2==ind2, 'forbit': index2!=ind2}"  @click="handleTimetable(item2.arrangementVOList,timeorder[index],index2,index)"
				 :key="index2">
					<view>
						<span>{{item2.arrangementVOList[0].userRealName}}</span><br><span v-if="item2.arrangementVOList.length > 0">共{{item2.arrangementVOList.length}}人</span>
					</view>
				</li>
			</ul>

			<view class="btn">
				<u-toast ref="uToast" />
				<u-modal v-model="already"  :content="already_cont"></u-modal>
				<u-modal v-model="show" @confirm="confirmReply"  show-cancel-button confirm-text="确定" cancel-text="取消" :content="content"></u-modal>
				
				<u-button @click="handleReply()" plain type="primary">提交申请</u-button>

				<u-modal  v-model="timetableShow"  :title="timetitle" @confirm="confirmChoose()" show-cancel-button :confirm-text="arr_btn_mes"
				 cancel-text="取消">
				 	<u-cell-group :border="false">
						<!-- <u-cell-item v-if="arr_btn_mes=='标记预约'" :border-top="false" :arrow="false">
						</u-cell-item> -->
				 		<u-cell-item v-for="item in namecont" :title="item.userRealName" :key="item.id"  :border-top="false" :arrow="false"><u-tag :text="item.moduleName" mode="dark" /></u-cell-item>
						<u-cell-item v-if="namecont.length==0" title="无排班人员" :border-top="false" :arrow="false"></u-cell-item>
				 	</u-cell-group>

				</u-modal>
				
			</view>
			
		</view>


	</view>


</template>

<script>
	import api from "../../utils/api.js"
	export default {
		data() {
			return {
				pickerDisabled:false,
				pickershow:false,
				timetitle:'',
				arr_btn_mes: '确定',
				ind: [],
				ind2: '',
				cache:'',
				cache2:'',
				cachetable:[],
				timetableShow: false,
				show: false,
				already: false,
				already_cont: '提交成功，请耐心等待管理员审核。',
				content: '是否要提交申请',
				currentYear: 1970, // 年份
				currentMonth: 1, // 月份
				currentDay: 1, // 日期
				currentWeek: 1, // 星期
				choosetime: '',
				timeorder: [],
				namecont: [],
				mainNameTable: [],
				modulelist:[],
				days: [],
				curModule:[],
				tomorrow:'',
				arrangementForm: {
					comment: "",
					moduleIdList: [],
					occupyTimeList: [],
					timeOrderIdList: []
				},
				list: [
					'提示：只能预约明天练车时间'
				],
				ruleback:'请输入您申请的排班项目'
			}
		},
		created() {
			this.initData(null)
			this.querytimetable()
			
			api.gettimeorder(2).then((res) => {
				this.timeorder = res.data
				this.timeorder.sort(function(a, b) {
					return a.id - b.id
				})
			}),
			api.getmoduleList(uni.getStorageSync('user').branchId).then((res)=>{
				this.modulelist = res.data
			})
		},
		methods: {
			querytimetable() {
				api.getArrageList(this.days[0].getTime(),1,2).then((res) => {
					this.mainNameTable = res.data
				})
			},
			handleReply() {
				this.show = true
			},
			showToast() {
							this.$refs.uToast.show({
								title: this.ruleback,
								type: 'warning ',
							})
						},
			//备预约
			confirmChoose() {
				let that=this;
				var timeStamp = new Date(new Date().setHours(0, 0, 0, 0))
				let tomorrow = timeStamp.getTime() + 86400000
				if (this.arr_btn_mes == '标记预约' && !this.arrangementForm.timeOrderIdList.includes(this.choosetime.id)) {
					if(this.curModule.length==0){
						this.showToast()
					}else{
					this.arrangementForm.occupyTimeList.push(tomorrow)
					this.arrangementForm.timeOrderIdList.push(this.choosetime.id)
					let obj = {}
					this.ind.push(this.cache)
					obj.userRealName = uni.getStorageSync('user').realName
					obj.moduleName = this.curModule.label
					this.mainNameTable[this.cache][this.ind2].arrangementVOList.splice(0, 0, obj)
					this.cachetable = this.mainNameTable
					this.arrangementForm.moduleIdList.push(this.curModule.value)
					}
				} else if (this.arr_btn_mes == '确定') {
					this.timetableShow = false
				}else if(this.arr_btn_mes == '取消标记'){
					let key = this.ind.indexOf(this.cache)
					let key1 = this.arrangementForm.timeOrderIdList.indexOf(this.choosetime.id)
					this.arrangementForm.timeOrderIdList.splice(key1,1)
					this.ind.splice(key,1)
					this.mainNameTable[this.cache][this.ind2].arrangementVOList.shift()
					this.arrangementForm.occupyTimeList.splice(0,1)
					this.arrangementForm.moduleIdList.splice(key1,1)
				}
			},
			chooseModule(e){		
				this.curModule = e[0]
			},
			//时间段名单详情
			handleTimetable(name, time, index2, index) {
				if(this.ind.length>=3&&!this.ind.includes(index)){
					this.ruleback = '最多只能选择三个时间段'
					this.showToast()
				}else{
					if (this.ind2 === index2 && !this.ind.includes(index)) {
					this.pickerDisabled = false
					this.arr_btn_mes = '标记预约'
				} else if(this.ind2 === index2 && this.ind.includes(index)){
					this.arr_btn_mes = '取消标记'
				}
				else {
					this.arr_btn_mes = '确定'
					this.pickerDisabled = true
				}
				this.cache = index
				this.timetableShow = true
				let choosedate = this.currentMonth + '月' + this.days[index2].getDate() + '日'
				this.choosetime = time
				let choosetimetostr = time.begin + '-' + time.end
				this.timetitle = choosedate + choosetimetostr
				this.namecont = name
				}
			},
			formatDate(year, month, day) {
				const y = year
				let m = month
				if (m < 10) m = `0${m}`
				let d = day
				if (d < 10) d = `0${d}`
				return `${y}-${m}-${d}`
			},
			//提交预约表单
			confirmReply() {
				if(this.arrangementForm.occupyTimeList.length==0||this.arrangementForm.moduleIdList.length==0){
					this.ruleback = '请选择您申请的排班信息'
					this.showToast()
				}else{
					api.postArrangement(this.arrangementForm).then((res) => {
					if (res.code == 0) {
						this.already_cont = '提交成功，请耐心等待管理员审核。'
						if(res.data.length!=0){
							this.already_cont = '您已提交过申请，请耐心等待管理员审核，期间请勿重复提交。'
						}
						this.querytimetable()
						this.ind = []
						this.arrangementForm.occupyTimeList.length = 0
						this.arrangementForm.timeOrderIdList.length = 0
						this.arrangementForm.moduleIdList.length = 0
						
					}else {
						this.already_cont = '提交失败，请稍后再试'
					}
					this.already = true
				})
				}
			},
			initData(cur) {
				let date = ''
				if (cur) {
					date = new Date(cur)
				} else {
					date = new Date()
				}
				this.currentDay = date.getDate() // 今日日期 几号
				this.currentYear = date.getFullYear() // 当前年份
				this.currentMonth = date.getMonth() + 1 // 当前月份
				this.currentWeek = date.getDay() // 1...6,0  // 星期几
				if (this.currentWeek === 0) {
					this.currentWeek = 7
				}
				const str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay) // 今日日期 年-月-日
				this.days.length = 0
				// 今天是周日，放在第一行第7个位置，前面6个 这里默认显示一周，如果需要显示一个月，则第二个循环为 i<= 35- this.currentWeek
				/* eslint-disabled */
				for (let i = this.currentWeek - 1; i >= 0; i -= 1) {
					const d = new Date(str)
					d.setDate(d.getDate() - i)
					this.days.push(d)
				}
				for (let i = 1; i <= 7 - this.currentWeek; i += 1) {
					const d = new Date(str)
					d.setDate(d.getDate() + i)
					this.days.push(d)
				}
				let today = new Date(new Date().setHours(8, 0, 0, 0))
				let tomorrow = today.setTime(today.getTime()+24*60*60*1000);
				if(this.days.findIndex((v) => {
					return v * 1 === tomorrow})!=-1){
						this.tomorrow = tomorrow*1
						this.ind2 = this.days.findIndex((v) => {
								return v * 1 == tomorrow * 1
						})
						if(this.cachetable.length===0){
							this.querytimetable()
						}else{
							this.mainNameTable = this.cachetable
						}
						
					}else{
						this.ind2 = -1
						this.querytimetable()
					}
			},

			// 上个星期
			weekPre() {
				const d = this.days[0] // 如果当期日期是7号或者小于7号
				d.setDate(d.getDate() - 7)
				this.initData(d)
			},

			// 下个星期
			weekNext() {
				const d = this.days[6] // 如果当期日期是7号或者小于7号
				d.setDate(d.getDate() + 7)
				this.initData(d)
			},

			// 上一個月  传入当前年份和月份
			pickPre(year, month) {
				const d = new Date(this.formatDate(year, month, 1))
				d.setDate(0)
				this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
			},


			// 下一個月  传入当前年份和月份 
			pickNext(year, month) {
				const d = new Date(this.formatDate(year, month, 1))
				d.setDate(35)
				this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
			},

			// 当前选择日期
			pick(date) {
			},
		},
	}
</script>

<style scoped lang="scss">
	.active {
	   background: #e0e0fd;
	   color: #fff;
	 }
	.blankspace{
		background-color: #ffffff;
		}
	.forbit{
		background-color: #f8f8f8;
		 }
	.date {
		height: 180rpx;
		color: #333;
		background-color: #F1F1F1;

		.month {
			font-size: 30rpx;
			text-align: center;
			padding-top: 20rpx;
		}

		.weekdays {
			display: flex;
			font-size: 28rpx;
			margin-top: 20rpx;

			li {
				flex: 1;
				text-align: center;
			}
		}

		.days {
			display: flex;
			margin-bottom: 18rpx;

			li {
				flex: 1;
				font-size: 30rpx;
				text-align: center;
				margin-top: 10rpx;
				line-height: 40rpx;

				.active {
					display: inline-block;
					width: 45rpx;
					height: 45rpx;
					color: #fff;
					border-radius: 50%;
					background-color: #fa6854;
				}

				.other-month {
					color: #e4393c;
				}
			}
		}

		.nametable {
			display: flex;
			li {
				flex: 1;
				font-size: 28rpx;
				text-align: center;
				line-height: 70rpx;
				color: #999;
				border-right: 1rpx solid #f1f1f1;
				border-bottom: 1rpx solid #f1f1f1;
				height: 150rpx;
				.other-month {
					color: #e4393c;
				}
				
			}
			
		}

		.innametable {
			display: flex;

			li {
				flex: 1;
				font-size: 28rpx;
				text-align: center;
				line-height: 50rpx;
				color: #999;
				border: 1rpx solid #f1f1f1;
				height: 50rpx;
				width: 50rpx;

				.active {
					display: inline-block;
					width: 45rpx;
					height: 45rpx;
					color: #fff;
					border-radius: 50%;
					background-color: #fa6854;
				}

				.other-month {
					color: #e4393c;
				}
			}
		}

	}

	.btn {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		margin: 0 auto;
		width: 92%;
	}

	.choosenametable {
		margin: 0 auto;
		width: 92%;
		margin-bottom: 30rpx;
	}
</style>
